<template>
    <div id="recomclass">
      <div v-for="(item,idx) in list" :key="idx" v-if="idx == currentPage">
        <img :src="item.head" alt="精选专题">
        <div v-for="(chil,idx) in item.goods_list" :key='idx' @click="toDetail(chil.id)">
          <img style="pointer-events: none;" :src="chil.val" alt="精选专题">
        </div>
      </div>
      <div v-if="!list[currentPage].flag" class="footColor" :style="{backgroundColor:list[currentPage].footColor}"></div>
      <div v-else >
        <img style="pointer-events: none;" :src="list[currentPage].footColor" alt="精选专题">
      </div>
      <div
        v-if="list[currentPage].gradient && list[currentPage].gradient.length"
        class="footColor"
        :style="{background:[
        'linear-gradient(to right, '+ list[currentPage].gradient[0] +' 0%, '+ list[currentPage].gradient[1] +' 100%)',
        '-moz-linear-gradient(to right, '+ list[currentPage].gradient[0] +' 0%, '+ list[currentPage].gradient[1] +' 100%)',
        '-webkit-linear-gradient(to right, '+ list[currentPage].gradient[0] +' 0%, '+ list[currentPage].gradient[1] +' 100%)'
        ]}"
      ></div>
    </div>
</template>

<script>
  import { toDetail } from '@/utils/appnativefunc.js'
    export default {
        name: "recomclass",
        data(){
          return {
            currentPage:0,
            list:[
              {
                head:require('@/assets/recomclass/01/01.jpg'),
                goods_list:[
                  {val:require('@/assets/recomclass/01/02.jpg'),id:'28'},
                  {val:require('@/assets/recomclass/01/04.jpg'),id:'29'},
                  {val:require('@/assets/recomclass/01/05.jpg'),id:'30'}
                ],
                footColor:'#fdc4e2',
                flag:false
              },
              {
                head:require('@/assets/recomclass/02/01.jpg'),
                goods_list:[
                  {val:require('@/assets/recomclass/02/02.jpg'),id:'28'},
                  {val:require('@/assets/recomclass/02/04.jpg'),id:'29'},
                  {val:require('@/assets/recomclass/02/05.jpg'),id:'30'}
                ],
                footColor:'#c7e3fe',
                flag:false
              },
              {
                head:require('@/assets/recomclass/03/01.jpg'),
                goods_list:[
                  {val:require('@/assets/recomclass/03/02.jpg'),id:'28'},
                  {val:require('@/assets/recomclass/03/04.jpg'),id:'29'},
                  {val:require('@/assets/recomclass/03/05.jpg'),id:'30'}
                ],
                footColor:'#fec0cb',
                flag:false
              },
              {
                head:require('@/assets/recomclass/04/01.jpg'),
                goods_list:[
                  {val:require('@/assets/recomclass/04/02.jpg'),id:'28'},
                  {val:require('@/assets/recomclass/04/04.jpg'),id:'29'},
                  {val:require('@/assets/recomclass/04/05.jpg'),id:'30'}
                ],
                footColor:'#c8b7fd',
                flag:false
              },
              {
                head:require('@/assets/recomclass/05/01.jpg'),
                goods_list:[
                  {val:require('@/assets/recomclass/05/02.jpg'),id:'28'},
                  {val:require('@/assets/recomclass/05/04.jpg'),id:'29'},
                  {val:require('@/assets/recomclass/05/05.jpg'),id:'30'}
                ],
                footColor:'#d2eac3',
                flag:false
              },
              {
                head:require('@/assets/recomclass/06/ac01.jpg'),
                goods_list:[
                  {val:require('@/assets/recomclass/06/ac02.jpg'),id:'28'},
                  {val:require('@/assets/recomclass/06/ac03.jpg'),id:'29'},
                  {val:require('@/assets/recomclass/06/ac04.jpg'),id:'30'}
                ],
                footColor:'#fec0cb',
                flag:false
              },
              {
                head:require('@/assets/recomclass/07/active01.jpg'),
                goods_list:[
                  {val:require('@/assets/recomclass/07/active02.jpg'),id:'28'},
                  {val:require('@/assets/recomclass/07/active03.jpg'),id:'29'},
                  {val:require('@/assets/recomclass/07/active04.jpg'),id:'30'}
                ],
                footColor:require('@/assets/recomclass/07/active05.jpg'),
                flag:true,
                gradient:['#ffb5d2','#ff9bc2']
              },
              {
                head:require('@/assets/recomclass/08/active01.jpg'),
                goods_list:[
                  {val:require('@/assets/recomclass/08/active02.jpg'),id:'28'},
                  {val:require('@/assets/recomclass/08/active03.jpg'),id:'29'},
                  {val:require('@/assets/recomclass/08/active04.jpg'),id:'30'}
                ],
                footColor:require('@/assets/recomclass/08/active05.jpg'),
                flag:true,
                gradient:['#d1c5fe','#c3b3fe']
              },
              {
                head:require('@/assets/recomclass/09/active01.jpg'),
                goods_list:[
                  {val:require('@/assets/recomclass/09/active02.jpg'),id:'28'},
                  {val:require('@/assets/recomclass/09/active03.jpg'),id:'29'},
                  {val:require('@/assets/recomclass/09/active04.jpg'),id:'30'}
                ],
                footColor:require('@/assets/recomclass/09/active05.jpg'),
                flag:true,
                gradient:['#fbe6e2','#f9dad5']
              },
              {
                head:require('@/assets/recomclass/10/active01.jpg'),
                goods_list:[
                  {val:require('@/assets/recomclass/10/active02.jpg'),id:'28'},
                  {val:require('@/assets/recomclass/10/active03.jpg'),id:'29'},
                  {val:require('@/assets/recomclass/10/active04.jpg'),id:'30'}
                ],
                footColor:require('@/assets/recomclass/10/active05.jpg'),
                flag:true,
                gradient:['#d3edfd','#b7ddf4']
              }
            ]
          }
        },
        watch:{
          $route(to,from){
            this.currentPage = to.query.id ;
          }
        },
        created(){
          this.currentPage = this.$route.query.id || 0 ;
        },
        methods:{
          toDetail
        }
    }
</script>

<style type="text/less" lang="less" scoped>
  #recomclass {
    .footColor {
      width: 100vw;
      height: 30vh;
      position: fixed;
      bottom: 0;
      z-index: -100;
    }
  }
</style>
